
<template>
  <!-- 个人中心 -->
  <div>
    <div class="beijing">
      <div v-if="bool">
        <!-- 头部 -->
        <div class="toubig">
          <div class="header2">
            <div class="userfont">
              <div class="img-box">
                <img :src="datainfo.image" alt="" />
              </div>
              <p>{{ data.remark }}</p>
              <div class="h-b">
                <ul>
                  <li>
                    <span class="sp1">姓名</span>
                    <span class="sp2">{{ datainfo.name }}</span>
                  </li>
                  <li>
                    <span class="sp1">联系方式</span>
                    <span class="sp2">{{ datainfo.phone }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 中部列表 -->
        <div class="middle">
          <ul>
            <li @click="bool = !bool">
              <img :src="img01" alt="" />
              <span>个人信息</span>
              <van-icon name="arrow" />
            </li>
            <li @click="tips">
              <img :src="img02" alt="" />
              <span>支付中心</span>
              <van-icon name="arrow" />
            </li>
            <li @click="tips">
              <img :src="img03" alt="" />
              <span>修改密码</span>
              <van-icon name="arrow" />
            </li>
            <li @click="$router.push('/userbanben')">
              <img :src="img04" alt="" />
              <span>版本信息</span>
              <van-icon name="arrow" />
            </li>
            <li @click="tips">
              <img :src="img05" alt="" />
              <span>清除缓存</span>
              <van-icon name="arrow" />
            </li>
          </ul>
        </div>
        <!-- 退出登录 -->
        <div class="lose">
          <button @click="removeToken">退出登录</button>
        </div>
      </div>
      <!-- 个人信息页 -->
      <div v-else>
        <van-row class="header4" gutter="20">
          <van-col span="2">
            <van-icon name="arrow-left" @click="bool = !bool" />
          </van-col>
          <van-col span="18">
            <span class="person">个人消息</span>
          </van-col>
          <van-col span="4">
            <van-icon name="wap-home-o" @click="$router.push('/home')" />
          </van-col>
        </van-row>
        <div class="name-phone">
          <van-row gutter="20" class="top">
            <van-col span="8">姓名</van-col>
            <van-col class="span14" span="16">{{ datainfo.name }}</van-col>
          </van-row>
          <van-row gutter="20">
            <van-col span="8">联系电话</van-col>
            <van-col class="span14" span="16">{{ datainfo.phone }}</van-col>
          </van-row>
        </div>
        <div class="xiangqing">
          <van-row gutter="20" class="top">
            <van-col span="8">性别</van-col>
            <van-col class="span14" span="16">{{ datainfo.sex }}</van-col>
          </van-row>
          <van-row gutter="20">
            <van-col span="8">年薪</van-col>
            <van-col class="span14" span="16">{{
              datainfo.month_salary
            }}</van-col>
          </van-row>
          <van-row gutter="20" class="top">
            <van-col span="8">月薪</van-col>
            <van-col class="span14" span="16">{{
              datainfo.year_salary
            }}</van-col>
          </van-row>
          <van-row gutter="20">
            <van-col span="8">个人简介</van-col>
            <van-col class="span14" span="16">{{ datainfo.remark }}</van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetUserList, GetUserInfo } from "@/request/api";
import { Dialog } from "vant";
export default {
  data() {
    return {
      img01: require("../assets/切图/Personal information.png"),
      img02: require("../assets/切图/形状 2.png"),
      img03: require("../assets/切图/change Password.png"),
      img04: require("../assets/切图/Personal information.png"),
      img05: require("../assets/切图/组 16.png"),
      active: 0,
      bool: true,
      data: [],
      datainfo: []
    };
  },
  methods: {
    removeToken() {
      Dialog.confirm({
        title: "提示",
        message: "是否确认退出登录"
      })
        .then(() => {
          localStorage.removeItem("token")
          this.$toast.success("退出登录成功")
          setTimeout(()=>{
            this.$router.push("/login")
          },1500)
        })
        .catch(() => {
          this.$toast.success("取消退出登录")
        });
    },
    tips() {
      Dialog.alert({
        title: "提示",
        message: "该功能正在建设当中..."
      }).then(() => {
        // on close
      });
    }
  },
  created() {
    GetUserList().then(res => {
      this.data = res.data;
    });
    GetUserInfo().then(res => {
      this.datainfo = res.data;
    });
  }
};
</script>
 
<style lang = "less" scoped>
.header2 {
  width: 100%;
  height: 1.8rem;
  background-color: #003399;
  .userfont {
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 0.15rem;
    width: 90%;
    height: 1.6rem;
    border-radius: 0.066667rem;
    position: absolute;
    left: 0.2rem;
    top: 1rem;
    .img-box {
      width: 1.26rem;
      height: 1.26rem;
      position: absolute;
      top: -44%;
      left: 33%;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    p {
      margin-top: 0.7rem;
      text-align: center;
      color: rgb(138, 135, 135);
    }
    .h-b {
      width: 100%;
      padding-top: 0.13333rem;
      border-top: 1px #ccc dashed;
      ul {
        display: flex;
        li {
          flex: 1;
          .sp1 {
            color: rgb(155, 151, 151);
          }
          .sp2 {
            margin-left: 0.066667rem;
          }
        }
      }
    }
  }
}
.toubig {
  height: 2.7rem;
}
.middle {
  ul {
    margin: 0 0.233333rem;
    background-color: #fff;
    border-radius: 0.066667rem;
    li {
      padding: 0.133333rem;
      img {
        width: 0.2rem;
        vertical-align: -0.033333rem;
      }
      span {
        margin-left: 0.066667rem;
      }
      .van-icon {
        vertical-align: -0.013333rem;
        margin-left: 2.3rem;
      }
    }
  }
}
.lose {
  width: 100%;
  button {
    width: 80%;
    background-color: #ccc;
    padding: 0.133333rem;
    border-radius: 0.066667rem;
    border: none;
    margin-left: 0.396667rem;
    margin-top: 0.5rem;
  }
}
.header4 {
  background-color: #003399;
  color: #fff;
  padding: 0.066667rem 0.066667rem;
  text-align: center;
  display: flex;
  .van-col {
    .person {
      display: block;
      margin-top: 0.026667rem;
    }
  }

  .van-icon {
    vertical-align: -0.053333rem;
    font-size: 0.3rem;
    vertical-align: -0.056667rem;
  }
}
.name-phone {
  margin-top: 0.133333rem;
  background-color: #fff;
  .span14 {
    text-align: right;
    color: #aaa;
  }
  .van-col {
    line-height: 0.4rem;
    padding: 0.1rem;
    border-bottom: 1px solid #eee;
  }
}
.xiangqing {
  margin-top: 0.133333rem;
  background-color: #fff;
  .span14 {
    text-align: right;
    color: #aaa;
  }
  .van-col {
    line-height: 0.4rem;
    padding: 0.1rem;
    border-bottom: 1px solid #eee;
  }
}
</style>